<template>
  <div class="editorPropsCanvas">
    <el-form label-width="90px" label-position="left" size="small">
      <el-collapse v-model="activeCollapse">
        <el-collapse-item name="canvas" title="画布">
          <div class="collapse-content">
            <el-form-item label="默认颜色">
              <el-color-picker v-model="canvasOption.color" @change="onChangeCanvasOption" show-alpha
                :predefine="colorPredefine"></el-color-picker>
            </el-form-item>
            <el-form-item label="背景颜色">
              <el-color-picker @change="onChangeBackgroundColor" v-model="backgroundColor" show-alpha
                :predefine="colorPredefine"></el-color-picker>
            </el-form-item>
            <el-form-item label="背景网格">
              <el-switch v-model="gridOption.grid" @change="onChangeGridOption"></el-switch>
            </el-form-item>
            <el-form-item label="网格颜色">
              <el-color-picker v-model="gridOption.gridColor" @change="onChangeGridOption" show-alpha
                :predefine="colorPredefine" color-format="hex"></el-color-picker>
            </el-form-item>
            <el-form-item label="网格大小">
              <el-input-number :controls="false" v-model="gridOption.gridSize"
                @change="onChangeGridOption"></el-input-number>
            </el-form-item>
            <el-form-item label="网格角度">
              <el-input-number :controls="false" v-model="gridOption.gridRotate"
                @change="onChangeGridOption"></el-input-number>
            </el-form-item>
            <el-form-item label="标尺">
              <el-switch v-model="ruleOption.rule" @change="onChangeRuleOption"></el-switch>
            </el-form-item>
            <el-form-item label="标尺颜色">
              <el-color-picker v-model="ruleOption.ruleColor" @change="onChangeRuleOption" show-alpha
                :predefine="colorPredefine"></el-color-picker>
            </el-form-item>
            <!-- <el-form-item label="自动缩放">
                  <el-switch v-model="canvasOption.autoFit" @change="onChangeAutoFit"></el-switch>
                </el-form-item> -->
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ColorPredefine } from '../../constant'
import EditorPropsTabStructure from '@/components/TopologyEditor/EditorProps/EditorPropsTabStructure.vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const window: any
defineOptions({
  name: 'EditorPropsCanvas'
})

onMounted(() => {
  websocketUrl.value = window.meta2d.store.data.websocket
  onChangeRuleOption()
  onChangeGridOption()

})

const activeName = ref('canvas')
const activeCollapse = ref('canvas')
const activeSocketCollapse = ref(['websocket', 'js'])
const colorPredefine = ref(ColorPredefine)
const canvasOption = reactive({
  penBackground: '#ffffff00',
  color: '#000000'
})
const backgroundColor = ref('#f4f4f4')
const gridOption = reactive({
  grid: true,
  gridColor: '#e2e2e2',
  gridSize: 20,
  gridRotate: 0
})
const ruleOption = reactive({
  rule: true,
  ruleColor: '#888888'
})
const websocketUrl = ref(null)
const socketFn = ref(null)
const httpUrl = ref(null)
const httpInterval = ref(1000)
const activeLayoutCollapse = ref('layout')
const maxWidth = ref(100)
const spaceDistance = ref(0)

function onChangeCanvasOption() {
  window.meta2d.setOptions(canvasOption)
  window.meta2d.render()
}
function onChangeBackgroundColor() {
  window.meta2d.setBackgroundColor(backgroundColor.value)
  window.meta2d.render()
}
function onChangeGridOption() {
  window.meta2d.setGrid(gridOption)
  window.meta2d.render()
}
function onChangeRuleOption() {
  window.meta2d.setRule(ruleOption)
  window.meta2d.render()
}
function onLayout() {
  window.meta2d.layout(undefined, maxWidth.value, spaceDistance.value)
}
function onChangeWebsocketUrl() {
  if (websocketUrl.value) {
    window.meta2d.connectWebsocket(websocketUrl.value)
  } else {
    window.meta2d.store.data.websocket = null
    window.meta2d.closeWebsocket()
  }
}
function onChangeSocketFn() {
  window.meta2d.store.data.socketCbJs = socketFn.value
  window.meta2d.listenSocket()
}
function onChangeHttpUrl() {
  if (httpUrl.value) {
    window.meta2d.store.data.http = httpUrl.value
    window.meta2d.store.data.httpTimeInterval = httpInterval.value // 轮询间隔时间, 默认 1000
    window.meta2d.store.data.httpHeaders = {} // 请求头设置
    window.meta2d.connectHttp()
  } else {
    window.meta2d.store.data.https[0] = null
    window.meta2d.closetHttp()
  }
}
</script>

<style lang="scss">
.editorPropsCanvas {
  .collapse-title {
    padding: 0 0 0 10px;
  }

  .collapse-content {
    padding: 0 0 0 10px;
  }
}
</style>
